<nz-spin *ngIf="isLoading" class="modal-spin"></nz-spin>
<form nz-form *ngIf="!isLoading" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired nzFor="name">姓名</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['name']">
      <input type="text" nz-input formControlName="name" placeholder="姓名" readonly>
      <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').hasError('required')">请输入姓名</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').hasError('maxlength')">不能超过30个字</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item *ngIf="selectedOptions.length > 0 ">
    <nz-form-label [nzSpan]="6"  nzFor="selectedIds">管理的运营中心</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['centerIds']">
      <nz-select formControlName="selectedIds" [nzMode]="'multiple'" [nzPlaceHolder]="'管理的运营中心'" [nzDisabled]="true" >
        <nz-option
          *ngFor="let option of selectedOptions"
          [nzLabel]="option.title"
          [nzValue]="option.id">
        </nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="centerIds">运营中心</nz-form-label>
    <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['centerIds']">
      <nz-select formControlName="centerIds" [nzMode]="'multiple'" [nzPlaceHolder]="'请选择负责的运营中心'">
        <nz-option
          *ngFor="let option of centerOptions"
          [nzLabel]="option.title"
          [nzValue]="option.id">
        </nz-option>
      </nz-select>
      <nz-form-extra style="color: orange;" *ngIf="centerOptions.length > 0 ">
        温馨提示：<br/>
        为用户设置负责管理的运营中心，即同时将用户设为运营中心角色；<br/>
        运营中心负责人设置后不可修改
      </nz-form-extra>
      <nz-form-explain *ngIf="centerOptions.length <= 0 " style="color: red">所有运营中心都已有负责人，没有符合条件的运营中心可以选择</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="submit" [nzType]="'primary'" >保存</button>
  </div>
</form>
